<template>
	<view class="process-tabbar">
		<view class="process-tabbar__content">
			<view class="process-tabbar__content-box">
				<view class="process-tabbar-box-item" v-for="(item,index) in list" :key="item.id" @click="itemClick(item)">
					<view class="process-tabbar__content-box-item-icon" v-if="item.name">
						<u-icon :name="item.name" size="25"></u-icon>
					</view>
					<view class="process-tabbar__content-box-item-image" v-else-if="item.image">
						<image :src="item.image" mode=""></image>
					</view>
					<view class="process-tabbar__content-box-item-text">{{item.text}}</view>
				</view>
			</view>
			<view class="process-tabbar__content-btn" v-if="showBtn">
				<view class="process-tabbar__content-btn-box">
					<view class="process-tabbar__content-btn-box-item" style="background-color: #fff;color: #000;" @click="reject" @longpress="suggestVisible = true,id = -1" @touchend="touchend">
						<view class="process-tabbar__content-btn-box-item-text" hover-class="btn-active">拒绝</view>
					</view>
					<view class="process-tabbar__content-btn-box-item" style="background-color: #007AFF;color: #fff;" @click="confirm" @longtap="longtapConfirm" @touchend="touchend">
						<view class="process-tabbar__content-btn-box-item-text" hover-class="btn-active">同意</view>
					</view>
				</view>
				<view class="process-tabbar__content-btn-text">*长按可填写意见</view>
			</view>
		</view>
		<view class="process-tabbar__placeholder"></view>
		
		<!-- 评论或意见弹窗 -->
		<pop-box>
			<u-popup :show="suggestVisible" mode="bottom"  @close="suggestVisible = false,logcontent = '',focus = false" @open="suggestVisible = true">
				<view class="suggest" style="padding: 20rpx;">
					<u--input
					    placeholder="请输入评论或意见"
						:focus="focus"
						:adjust-position="false"
					    border="none"
						shape="circle"
					    v-model="logcontent"
						:customStyle="{'height': '60rpx'}"
					  ></u--input>
					  <u-button type="primary" text="确定" color="#2979ff" :customStyle="{'height': '80rpx','margin-top': '20rpx'}" @click="suggestClick"></u-button>
				</view>
			</u-popup>
		</pop-box>
		<!-- 更多弹窗 -->
		<pop-box>
			<u-popup :show="showMore" mode="bottom" :round="10" @close="showMore = false" @open="showMore = true">
				<view class="more">
					<view class="more__menu">
						<view class="more__menu--item" @click="itemClick(item)" v-for="item in subMenu" :key="item.id">
							<view class="more__menu--item-icon">
								<image :src="item.image" mode=""></image>
							</view>
							<view class="more__menu--item-text">{{item.text}}</view>
						</view>
					</view>
					<view class="more__cancel">
						<view class="more__cancel-text" hover-class="clickable" @click="showMore = false">取消</view>
					</view>
				</view>
			</u-popup>
		</pop-box>
		<!-- 自由回退人员弹窗 -->
		<pop-box>
			<u-popup :show="flowBackVisible" mode="bottom" :round="10" @close="flowBackVisible = false,logcontent = ''" @open="flowBackVisible = true">
				<view class="flow-back" style="padding: 20rpx;">
					<view class="flow-back__list">
						<view class="flow-back__list--item" v-for="item in flowBackList" :key="item.Pxid">
							<view class="flow-back__list--item-title">{{item[0].StepName}}</view>
							<view class="flow-back__list--item__list">
								<view class="flow-back__list--item__list--item" v-for="v in item" :key="item.Pxid" @click="checkFlowBack(v)">
									<view class="flow-back__list--item__list--item-avator">
										<view class="flow-back__list--item__list--item-avator-checked" v-show="v.checked">
											<image src="@/static/theme/default/home/checked_green.png" mode=""></image>
										</view>
										<avator :avator="v.avator" :name="v.UserName"></avator>
									</view>
									<view class="flow-back__list--item__list--item-text">{{v.UserName}}</view>
								</view>
								<view class="" style="clear: both;"></view>
							</view>
						</view>
					</view>
					<view class="flow-back__input" style="border-bottom: 2rpx solid #eee;margin-top: 20rpx;">
						<u--input
						    placeholder="请输入意见"
							:focus="flowBackVisible"
						    border="none"
							shape="circle"
							:adjust-position="false"
						    v-model="logcontent"
							:customStyle="{'height': '60rpx'}"
						  ></u--input>
					</view>
					<u-button type="primary" text="确定" color="#2979ff" :customStyle="{'height': '80rpx','margin-top': '20rpx'}" @click="selectFlowBack"></u-button>
				</view>
			</u-popup>
		</pop-box>
		<!-- 通知组件 -->
		<u-toast ref="uToast"></u-toast>
		<!-- 模态框组件 -->
		<pop-box>
			<u-modal :show="showModal" :showCancelButton="true" :title="modalTitle" :content='modalContent' @confirm="modalConfirm" @cancel="showModal = false,focus = false"></u-modal>
		</pop-box>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import _data from '@/common/_data.js'
	import PopBox from '@/components/custom/pop-box/index.vue'
	import Avator from '@/components/custom/avator/avator.vue'
	import _mixins from '@/common/_mixins';
	
	export default {
		components: {
			PopBox,
			Avator
		},
		data() {
			return {
				obsusername: _data.localData('name'),
				pxid: _data.localData('userid'),
				static_avator: _data.data('static_url'),
				list: [],
				subMenu: [
					{
						text: '转交',
						image: require('@/static/theme/default/home/zhuanjiao.png'),
						id: 2
					},
					{
						text: '回退',
						image: require('@/static/theme/default/home/huitui.png'),
						id: -2
					},
					{
						text: '自由回退',
						image: require('@/static/theme/default/home/ziyouhuitui.png'),
						id: -5
					},
				],
				tostepno: '',//下一个流程的stepno
				logcontent: '',//意见
				suggestVisible: false,
				type: '',//长按同意或拒绝，reject：拒绝，confirm：同意，comment：评论
				showMore: false,
				tousername: '',
				topxid: '',
				backpid: '',//回退pxid
				showModal: false,
				modalTitle: '',
				modalContent: '',
				id: null,
				flowBackVisible: false,
				flowBackList: [],
				focus: false
			}
		},
		props: {
			process: {
				type: Object,
				default: () => {}
			},
			//业务校验接口的apiname
			checkName: {
				type: String,
				default: ''
			},
			//撤销跳转的路由
			route: {
				type: String,
				default: ''
			},
			//撤销传递的数据
			data: {
				type: [Object,Array],
				default: () => {}
			}
		},
		computed: {
			showBtn() {
				return Object.keys(this.process).length && this.process.status == 1 ? true : false;
			}
		},
		watch: {
			process: {
				deep: true,
				immediate: true,
				handler() {
					if(Object.keys(this.process).length) {
						this.$nextTick(function(){
							this.setStatus()
						})
					}
				}
			}
		},
		mounted() {
			uni.$on('select-list',(v) => {
				_data.localData('select-list',[]);
				this.tousername = v[0].pname;
				this.topxid = v[0].pxid;
				setTimeout(() => {
					switch(this.id) {
						case 3:
							this.procFlowOpinion();
							break;
						case 2:
							this.procFlowPass();
							break;
						case -5:
							this.procFlowPass();
							break;
					}
				},500)
			})
		},
		destroyed() {
			uni.$off('select-list')
		},
		methods: {
			/**
			 * 更新通知的流程状态
			 */
			updateNoticeFlowState(v) {
				_mixins.methods.$httpSend({
					path: '/im/alarm/updateNoticeFlowState',
					data: {
						InsFlowId: this.process.InsFlowId,
						FlowState: v
					},
				});
			},
			/**
			 * 获取下发环节
			 */
			procFlowNextStep() {
				let that = this;
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'procFlowNextStep',
						apiparam: {
							insflowid: this.process.InsFlowId,
							stepno: this.process.StepNo,
							pxid: this.pxid,
							obsusername: this.obsusername,
						},
						success(res) {
							if(res.length) {
								that.tostepno = res[0].ToStepNo
								resolve()
							} else {
								uni.showToast({
									title: '无法获取下发环节',
									icon: 'none'
								})
							}
						}
					})
				})
			},
			/**
			 * 获取自由回退环节列表
			 */
			getFlowBackPidList() {
				let that = this;
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'getFlowBackPidList',
						apiparam: {
							InsFlowId: this.process.InsFlowId,
						},
						success(res) {
							if(res.length) {
								let temp = [];
								res.forEach(item => {
									item.checked = false;
									item.avator = that.static_avator + "/static/photo/user/" + item.Pxid + "/70.jpg";
									if(temp.indexOf(item.StepNo) == -1) {
										temp.push(item.StepNo)
									}
								})
								let list = [];
								temp.forEach((item,index) => {
									list[index] = []
									res.forEach(v => {
										if(item == v.StepNo) {
											list[index].push(v)
										}
									})
								})
								that.showMore = false;
								that.flowBackList = list;
								that.flowBackVisible = true;
								resolve()
							} else {
								uni.showToast({
									title: '无法获取回退环节列表',
									icon: 'none'
								})
							}
						}
					})
				})
			},
			/**
			 * 业务校验
			 */
			checkRule() {
				let that = this;
				return new Promise((resolve,reject) => {
					if(this.checkName) {
						_custom.getDataJava({
							apiname: this.checkName,
							apiparam: {
								insflowid: this.process.InsFlowId,
								typecode: this.process.TypeCode
							},
							success(res) {
								if(res.length) {
									if(res[0].code == '0') {
										resolve()
									} else {
										uni.showToast({
											title: res[0].msg,
											icon: 'none'
										})
									}
								}
							}
						})
					} else {
						resolve()
					}
				})
			},
			/**
			 * 流程发送
			 */
			procFlowSend() {
				let that = this;
				uni.showLoading({
					title: '提交中...'
				})
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'procFlowSend',
						apiparam: {
							insflowid: this.process.InsFlowId,
							fromstepno: this.process.StepNo,
							pxid: this.pxid,
							obsusername: this.obsusername,
							tostepno: this.tostepno,
							logcontent: this.logcontent
						},
						success(res) {
							if(res.length) {
								if(res[0].code == '0') {
									uni.$emit('process-confirm')
								} else if(res[0].code == '200') {//流程结束
									that.updateNoticeFlowState(1)
									that.$emit('confirm',{
										insflowid: that.process.InsFlowId,
									})
									uni.$emit('process-confirm')
								}
								that.trigFlowStepNotice()
								uni.showToast({
									title: res[0].msg,
									icon: 'none'
								})
							}
						},
						complete() {
							that.logcontent = '';
							that.suggestVisible = false;
							uni.hideLoading()
						}
					})
				})
			},
			/**
			 * 流程拒绝
			 */
			procFlowReject() {
				let that = this;
				uni.showLoading({
					title: '提交中...'
				})
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'procFlowReject',
						apiparam: {
							insflowid: this.process.InsFlowId,
							fromstepno: this.process.StepNo,
							pxid: this.pxid,
							obsusername: this.obsusername,
							logcontent: this.logcontent
						},
						success(res) {
							if(res.length) {
								that.updateNoticeFlowState(-1)
								uni.$emit('process-confirm')
								uni.showToast({
									title: res[0].msg,
									icon: 'none'
								})
								that.trigFlowStepNotice()
							}
						},
						complete() {
							that.logcontent = '';
							that.suggestVisible = false;
							uni.hideLoading()
						}
					})
				})
			},
			/**
			 * 流程撤销
			 */
			procFlowCancel() {
				let that = this;
				uni.showLoading({
					title: '提交中...'
				})
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'procFlowCancel',
						apiparam: {
							insflowid: this.process.InsFlowId,
							pxid: this.pxid,
							obsusername: this.obsusername,
						},
						success(res) {
							if(res.length) {
								that.updateNoticeFlowState(-4)
								that.trigFlowStepNotice()
								uni.$emit('process-confirm')
								uni.showToast({
									title: res[0].msg,
									icon: 'none'
								})
								if(that.id == 9 && res[0].code == '0') {
									console.log(that.process)
									setTimeout(() => {
										uni.redirectTo({
											url: '/pages/home/child/' + that.route + '/index?data=' + JSON.stringify(that.data) + '&insflowid=' + that.process.InsFlowId
										})
									},400)
								}
							}
						},
						complete() {
							that.logcontent = '';
							that.suggestVisible = false;
							uni.hideLoading()
						}
					})
				})
			},
			/**
			 * 流程强制撤销
			 */
			procFlowForceCancel() {
				let that = this;
				uni.showLoading({
					title: '提交中...'
				})
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'procFlowForceCancel',
						apiparam: {
							insflowid: this.process.InsFlowId,
							pxid: this.pxid,
							obsusername: this.obsusername,
						},
						success(res) {
							if(res.length) {
								that.updateNoticeFlowState(-4)
								that.trigFlowStepNotice()
								uni.$emit('process-confirm')
								that.ForceCancelFunc()
							}
						},
						complete() {
							that.logcontent = '';
							that.suggestVisible = false;
							uni.hideLoading()
						}
					})
				})
			},
			/**
			 * 流程撤回
			 */
			procFlowRetrieve() {
				let that = this;
				uni.showLoading({
					title: '提交中...'
				})
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'procFlowRetrieve',
						apiparam: {
							insflowid: this.process.InsFlowId,
							pxid: this.pxid,
							obsusername: this.obsusername,
						},
						success(res) {
							if(res.length) {
								uni.$emit('process-confirm')
								that.trigFlowStepNotice()
								uni.showToast({
									title: res[0].msg,
									icon: 'none'
								})
							}
						},
						complete() {
							that.logcontent = '';
							that.suggestVisible = false;
							uni.hideLoading()
						}
					})
				})
			},
			/**
			 * 流程征询意见
			 */
			procFlowOpinion() {
				let that = this;
				this.$refs.uToast.show({
					type: 'loading',
					message: "加载中..."
				})
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'procFlowOpinion',
						apiparam: {
							insflowid: this.process.InsFlowId,
							pxid: this.pxid,
							obsusername: this.obsusername,
							fromstepno: this.process.StepNo,
							tousername: this.tousername,
							topxid: this.topxid
						},
						success(res) {
							uni.hideLoading()
							if(res.length) {
								uni.$emit('process-confirm')
								that.trigFlowStepNotice()
								uni.showToast({
									title: res[0].msg,
									icon: 'none'
								})
							}
						},
						complete() {
							that.logcontent = '';
							that.suggestVisible = false;
							uni.hideLoading()
						}
					})
				})
			},
			/**
			 * 流程评论
			 */
			procFlowComment() {
				let that = this;
				uni.showLoading({
					title: '提交中...'
				})
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'procFlowComment',
						apiparam: {
							insflowid: this.process.InsFlowId,
							pxid: this.pxid,
							obsusername: this.obsusername,
							comment: this.logcontent
						},
						success(res) {
							if(res.length) {
								uni.$emit('process-confirm')
								that.trigFlowStepNotice()
								uni.showToast({
									title: res[0].msg,
									icon: 'none'
								})
							}
						},
						complete() {
							that.logcontent = '';
							that.suggestVisible = false;
							uni.hideLoading()
						}
					})
				})
			},
			/**
			 * 流程催办
			 */
			procFlowHurry() {
				let that = this;
				uni.showLoading({
					title: '提交中...'
				})
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'procFlowHurry',
						apiparam: {
							insflowid: this.process.InsFlowId,
							pxid: this.pxid,
							obsusername: this.obsusername,
						},
						success(res) {
							if(res.length) {
								uni.$emit('process-confirm')
								that.trigFlowStepNotice()
								uni.showToast({
									title: res[0].msg,
									icon: 'none'
								})
							}
						},
						complete() {
							that.logcontent = '';
							that.suggestVisible = false;
							uni.hideLoading()
						}
					})
				})
			},
			/**
			 * 流程回退
			 */
			procFlowSendBack() {
				let that = this;
				uni.showLoading({
					title: '提交中...'
				})
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'procFlowSendBack',
						apiparam: {
							insflowid: this.process.InsFlowId,
							pxid: this.pxid,
							obsusername: this.obsusername,
							fromstepno: this.process.StepNo,
							backpid: this.backpid,
							logcontent: this.logcontent
						},
						success(res) {
							if(res.length) {
								uni.$emit('process-confirm')
								that.trigFlowStepNotice()
								uni.showToast({
									title: res[0].msg,
									icon: 'none'
								})
							}
						},
						complete() {
							that.logcontent = '';
							this.backpid = '';
							that.suggestVisible = false;
							uni.hideLoading()
						}
					})
				})
			},
			/**
			 * 流程转交
			 */
			procFlowPass() {
				let that = this;
				this.$refs.uToast.show({
					type: 'loading',
					message: "加载中..."
				})
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'procFlowPass',
						apiparam: {
							insflowid: this.process.InsFlowId,
							pxid: this.pxid,
							obsusername: this.obsusername,
							fromstepno: this.process.StepNo,
							tousername: this.tousername,
							topxid: this.topxid
						},
						success(res) {
							if(res.length) {
								uni.$emit('process-confirm')
								that.trigFlowStepNotice()
								uni.showToast({
									title: res[0].msg,
									icon: 'none'
								})
							}
						},
						complete() {
							that.logcontent = '';
							that.suggestVisible = false;
							uni.hideLoading()
						}
					})
				})
			},
			/**
			 * 触发流程环节通知
			 */
			trigFlowStepNotice() {
				let that = this;
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'trigFlowStepNotice',
						code: 2,
						apiparam: {
							insflowid: this.process.InsFlowId,
						},
						success() {}
					})
				})
			},
			/**
			 * 业务强制撤销
			 */
			ForceCancelFunc() {
				let that = this;
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: this.process.ForceCancelFunc,
						code: 2,
						apiparam: {
							insflowid: this.process.InsFlowId,
						},
						success() {
							uni.showToast({
								title: '强制撤销成功',
								icon: 'none'
							})
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/home/child/' + that.route + '/index?data=' + JSON.stringify(that.data) + '&insflowid=' + that.process.InsFlowId
								})
							},400)
						}
					})
				})
			},
			/**
			 * 设置底部菜单
			 */
			setStatus() {
				switch(this.process.status) {
					case 0://流程已完成
						this.list = [
							{
								name: 'chat',
								text: '评论',
								id: 5
							}
						]
						break;
					case 1://审批人
						this.list = [
							{
								name: 'chat',
								text: '评论',
								id: 5
							},
							{
								name: 'order',
								text: '征询意见',
								id: 3
							},
							{
								name: 'more-dot-fill',
								text: '更多',
								id: 7
							},
						]
						break;
					case 2://非审批人
						this.list = [
							{
								name: 'chat',
								text: '评论',
								id: 5
							},
						]
						break;
					case 3://发起人
						this.list = [
							{
								name: 'bell',
								text: '催办',
								id: 6
							},
							{
								name: require('@/static/theme/default/home/xiugai.png'),
								text: '修改',
								id: 9
							},
							{
								name: 'chat',
								text: '评论',
								id: 5
							},
							{
								name: 'backspace',
								text: '撤销流程',
								id: -4
							}
						]
						break;
					case 4://流程已结束并且发起人是自己且已经通过
						this.list = [
							{
								name: 'chat',
								text: '评论',
								id: 5
							},
							{
								name: require('@/static/theme/default/home/xiugai.png'),
								text: '修改',
								id: 8
							},
							{
								name: require('@/static/theme/default/home/tijiao.png'),
								text: '再次提交',
								id: 10
							},
						]
						break;
					case 5://流程已结束并且发起人是自己但未通过
						this.list = [
							{
								name: 'chat',
								text: '评论',
								id: 5
							},
							{
								name: require('@/static/theme/default/home/tijiao.png'),
								text: '再次提交',
								id: 10
							},
						]
						break;
					case 6:///上一个环节是审批人
						this.list = [
							{
								name: 'chat',
								text: '评论',
								id: 5
							},
							{
								name: 'backspace',
								text: '撤回',
								id: -3
							},
						]
						break;
				}
			},
			modalConfirm() {
				switch(this.id) {
					case -4://撤销流程
						this.procFlowCancel();
						break;
					case -3://撤回
						this.procFlowRetrieve();
						break;
					case 0://发起流程
						this.checkRule().then(() => {
							return this.procFlowNextStep()
						}).then(() => {
							this.procFlowSend()
						})
						break;
					case -1:
						this.procFlowReject();
						break;
					case 6:
						this.procFlowHurry();
						break;
					case 8://修改（强制撤销）
						this.procFlowForceCancel();
						break;
					case 9://修改
						this.procFlowCancel();
						break;
				}
				this.showModal = false;
			},
			/**
			 * 点击底部菜单栏
			 * @param {Object} v
			 */
			itemClick(v) {
				this.id = v.id;
				switch(v.id) {
					case -5://自由回退
						this.getFlowBackPidList()
						break;
					case -4://撤销流程
						this.modalContent= '你确定要撤销申请吗？';
						this.showModal = true;
						break;
					case -3://撤回
						this.modalContent= '你确定要撤回吗？';
						this.showModal = true;
						break;
					case -2://回退
						this.showMore = false;
						this.suggestVisible = true;
						this.focus = true;
						break;
					case 2://转交
						this.showMore = false;
						uni.navigateTo({
							url: '/pages/wait/add/select?type=radio',
						});
						break;
					case 3://征询意见
						uni.navigateTo({
							url: '/pages/wait/add/select?type=radio',
						});
						break;
					case 5://评论
						this.suggestVisible = true;
						this.focus = true;
						break;
					case 6://催办
						this.modalContent= '你确定要催办吗？';
						this.showModal = true;
						break;
					case 7://更多
						this.showMore = true;
						break;
					case 8://流程已结束并且发起人是自己且已经通过
						this.modalTitle = '确定修改吗？'
						this.modalContent= '修改审批中的审批单将会撤回当前审批单，再次发起审核';
						this.showModal = true;
						break;
					case 9://流程已结束并且发起人是自己但未通过
						this.modalTitle = '确定修改吗？'
						this.modalContent= '修改审批中的审批单将会撤回当前审批单，再次发起审核';
						this.showModal = true;
						break;
					case 10://再次提交
						uni.redirectTo({
							url: '/pages/home/child/' + this.route + '/index?data=' + JSON.stringify(this.data)
						})
						break;
				}
			},
			/**
			 * 点击同意按钮
			 */
			confirm() {
				this.modalContent= '确认同意？';
				this.showModal = true;
				this.id = 0;
			},
			/**
			 * 点击拒绝按钮
			 */
			reject() {
				this.modalContent= '确认拒绝？';
				this.showModal = true;
				this.id = -1;
			},
			/**
			 * 点击评论和意见的按钮
			 */
			suggestClick() {
				if(!this.logcontent) {
					uni.showToast({
						title: '请输入评论或意见内容',
						icon: 'none'
					})
					return
				}
				switch(this.id) {
					case 0://同意
						this.modalConfirm();
						this.suggestVisible = false;
						break;
					case -1://拒绝
						this.modalConfirm()
						this.suggestVisible = false;
						break;
					case -2://回退
						this.procFlowSendBack();
						break;
					case 5://评论
						this.suggestVisible = false;
						this.procFlowComment()
						break;
				}
			},
			/**
			 * 选择自由回退人员
			 * @param {Object} v
			 */
			checkFlowBack(v) {
				this.flowBackList.forEach(item => {
					item.forEach(value => {
						value.checked = false
					})
				})
				this.$set(v,'checked',true);
				this.backpid = v.Pid;
			},
			/**
			 * 点击自由回退确认按钮
			 */
			selectFlowBack() {
				if(!this.backpid) {
					uni.showToast({
						title: '请选择一位回退人',
						icon: 'none'
					})
					return
				}
				if(!this.logcontent) {
					uni.showToast({
						title: '请输入意见内容',
						icon: 'none'
					})
					return
				}
				this.flowBackVisible = false;
				this.procFlowSendBack();
			},
			/**
			 * 确认按钮长按
			 */
			longtapConfirm() {
				this.suggestVisible = true;
				this.id = 0;
			},
			touchend() {
				this.focus = true;
			}
		}
	}
</script>

<style scoped lang="scss">
	.process-tabbar {
		user-select: none; 
		
		&__content {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100rpx;
			padding: 0 20rpx;
			padding-top: 20rpx;
			padding-bottom: 40rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			background-color: #eee;
			z-index: 999;
			
			&-box {
				height: 100%;
				flex: 3;
				display: flex;
				justify-content: space-around;
				align-items: center;
				
				&-item {
					
					&-icon {
						display: flex;
						justify-content: center;
						align-items: center;
					}
					
					&-image {
						width: 60rpx;
						height: 60rpx;
						
						image {
							width: 100%;
							height: 100%;
						}
					}
					
					&-text {
						font-size: 25rpx;
					}
				}
			}
			
			&-btn {
				position: relative;
				flex: 2;
				height: 100%;
				
				&-box {
					display: flex;
					justify-content: space-around;
					align-items: center;
					height: 100%;
					
					&-item {
						height: 75%;
						flex: 1;
						margin: 0 10rpx;
						border-radius: 10rpx;
						font-size: 30rpx;
						border: 1rpx solid #ddd;
						
						&-text {
							height: 100%;
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 10rpx;
						}
					}
				}
				
				&-text {
					width: 100%;
					text-align: center;
					position: absolute;
					bottom: -30rpx;
					font-size: 20rpx;
					color: #aaa;
				}
				
			}
		}
		
		&__placeholder {
			height: 160rpx;
		}
	}
	
	.more {
		
		&__menu {
			background-color: rgba(235,235,235,.8);
			padding: 30rpx 0;
			padding-left: 30rpx;
			display: flex;
			align-items: center;
			border-radius: 10px 10px 0 0;
			
			&--item {
				width: 120rpx;
				height: 140rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				
				&-icon {
					border-radius: 10rpx;
					height: 80rpx;
					width: 80rpx;
					background-color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					
					image {
						width: 50%;
						height: 50%;
					}
				}
				
				&-text {
					font-size: 25rpx;
					height: 60rpx;
					line-height: 60rpx;
				}
			}
			
		}
		
		&__cancel {
			height: 100rpx;
			background-color: #fff;
			border-top: 1rpx solid #eee;
			
			&-text {
				height: 100%;
				font-size: 30rpx;
				text-align: center;
				line-height: 100rpx;
			}
		}
	}
	
	.flow-back {
		
		&__list {
			background-color: #fff;
			border-radius: 10px;
			
			&--item {
				
				&:not(:last-child) {
					border-bottom: 1rpx solid #eee;
				}
				
				&-title {
					height: 60rpx;
					line-height: 60rpx;
					padding: 0 20rpx;
				}
				
				&__list {
					padding-left: 40rpx;
					clear: both;
					
					&--item {
						float: left;
						width: 100rpx;
						text-align: center;
						
						&-avator {
							width: 80rpx;
							height: 80rpx;
							margin: 0 auto;
							position: relative;
							
							&-checked {
								width: 40rpx;
								height: 40rpx;
								position: absolute;
								top: 0;
								right: 0;
								z-index: 9;
								
								image {
									width: 100%;
									height: 100%;
								}
							}
						}
						
						&-text {
							font-size: 25rpx;
						}
					}
				}
			}
		}
	}
	
	.btn-active {
		background-color: rgba(202, 202, 202, 0.3);
	}
</style>
